<!DOCTYPE HTML>
<html>
  <head>
    <title>wait test</title>
    <script type="text/javascript" charset="utf-8">

      function setTimeoutAddDisplay(id, current_id, timeout) {
          setTimeoutAdd(id, "none", id, current_id, timeout);
          setTimeoutDisplay(id, "block", timeout*2)
      }

      function setTimeoutDisplay(id, display, timeout) {
          setTimeout(function() {
              var el = document.getElementById(id)
                  el.style.display = display;
                  el.setAttribute("custom", id)
          }, timeout);
      }

      function setTimeoutAdd(id, display, text, existing_id, timeout) {
          var newDiv = document.createElement("div");
          newDiv.setAttribute("id", id);
          newDiv.style.display = display;
          newDiv.appendChild(document.createTextNode(text));

          var currentDiv = document.getElementById(existing_id);

          setTimeout(function() {
              document.body.insertBefore(newDiv, currentDiv);
          }, timeout);
      }

      function setTimeoutRemove(id, timeout) {
          setTimeout(function() {
              var e = document.getElementById(id);
              e.parentNode.removeChild(e);
          }, timeout);
      }

      function setDisabled(id, disabled, timeout) {
        setTimeout(function() {
          document.getElementById(id).disabled = disabled;
        }, timeout);
      }

      function makeWritable(id, timeout) {
          setTimeout(function() {
              document.getElementById(id).removeAttribute('readonly');
          }, timeout);
      }

      function changeName(id) {
          document.getElementById(id).name = 'different';
      }
    </script>
  </head>

  <body>
    <div id="foo" custom="" style="display:block;">foo</div>
    <div id="bar" style="display:none;" onclick='this.innerHTML = "changed"'>bar</div>
    <a id="show_bar" href="#" onclick="setTimeoutDisplay('bar', 'block', 1000);">show bar</a>
    <a id="hide_foo" href="#" onclick="setTimeoutDisplay('foo', 'none', 1000);">hide foo</a>
    <a id="remove_foo" href="#" onclick="setTimeoutRemove('foo', 1000);">remove foo</a>
    <a id="add_foobar" href="#" onclick="setTimeoutAddDisplay('foobar', 'bar', 1000);">add foobar</a>
    <a id="readd_bar" href="#" onclick="setTimeoutRemove('bar', 500); setTimeoutAddDisplay('bar', 'foo', 1000);">re-add bar</a>
    <div id="buttons">
      <button id="btn" type="button" onclick="setDisabled('btn', true, 0);" disabled>Click To Disable!</button>
      <a id="enable_btn" href="#" onclick="setDisabled('btn', false, 1000);">enable btn</a>
      <button id="btn2" style="display:none;" type="button" disabled>Hidden and Disabled</button>
      <a id="show_and_enable_btn" href="#" onclick="setTimeoutDisplay('btn2', 'block', 500); setDisabled('btn2', false, 1000);">
        show and enable btn
      </a>
    </div>
    <div>
      <a id="change_select" href="#" onclick="changeName('add_select');">change select list</a>
      <a id="add_select" name="add_select" href="#" onclick="setTimeoutDisplay('languages', 'block', 500);">show select list</a>
    </div>
    <form>
      <label for="textfield">Not Displayed Yet</label>
      <input type="textfield" title="Text Displayed" name="textfield" id="textfield" style="display:none;" /> <br  />
      <a id="show_textfield" href="#" onclick="setTimeoutDisplay('textfield', 'block', 1000);">show textfield</a>
      <label for="writable">Not Writable</label>
      <input type="text" title="Not Writable" name="writable" id="writable" readonly/> <br  />
      <a id="make-writable" onclick="makeWritable('writable', 1000);">Make Writable</a>
      <fieldset>
        <select name="languages" id="languages", style="display: none">
          <option id="danish" value="1">Danish</option>
          <option selected="selected" value="2">English</option>
          <option selected="selected" value="3">Norwegian</option>
          <option value="4" disabled>Russian</option>
          <option>Swedish</option>
        </select> <br />
      </fieldset>
    </form>
    <div id="also_hidden" style="display:none;">
      <div id="hidden_child">Nothing to see here</div>
    </div>
  </body>
</html>
